<template>
  <a-card>
    <div :class="advanced ? 'search' : null">
      <a-form layout="horizontal">
        <div :class="advanced ? null: 'fold'">
          <a-row >
          <a-col :md="6" :sm="24" >
            <a-form-item
              label="订单编号"
              :labelCol="{span: 5}"
              :wrapperCol="{span: 16, offset: 1}"
            >
              <a-input placeholder="请输入" v-model="searchParams.merchOrderNo"/>
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="24" >
            <a-form-item
              label="日期"
              :labelCol="{span: 5}"
              :wrapperCol="{span: 16, offset: 1}"
            >
              <a-date-picker 
                placeholder="请选择日期" 
                format="YYYY-MM-DD"
                v-model="searchParams.date"
                @change="onChangeDate" />
            </a-form-item>
          </a-col>
          <a-col :md="4" :sm="24" >
            <span style="float: right; margin-top: 3px;">
              <a-button type="primary" @click="submitSearch">查询</a-button>
              <a-button style="margin-left: 8px" @click="reset">重置</a-button>
            </span>
          </a-col>
        </a-row>
        </div>
      </a-form>
    </div>
    <div>
      <standard-table
        :rowKey="(record, index) => index"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="pagination"
        @change="handleTableChange"
      >
        <template slot="amount" slot-scope="amount">
          <a>{{ Number(amount.text) / 100}}元</a>
        </template>
        <template slot="respMsg" slot-scope="respMsg">
          <a-tag :color="respMsg.text === '成功' ? 'blue' : 'orange'" >
            {{ respMsg.text }}
          </a-tag>
        </template>
        <template slot="action" slot-scope="item">
          <a-button type="primary" @click="showModal(item)">详情</a-button>
        </template>
        <template slot="statusTitle">
          <a-icon @click.native="onStatusTitleClick" type="info-circle" />
        </template>
      </standard-table>
    </div>

    <!-- 支付详情弹窗 -->
    <a-modal v-model="visible" title="支付信息" @ok="() => {visible = false}">
      <div>
        <p v-for="(value, key) in modalData" :key="key">
          <span>{{ key }}：</span>
          <span>{{ value }}</span>
        </p>
      </div>
      <div>
        <a-button type="primary" @click="queryResult">查询支付结果</a-button>
      </div>
      <div v-if="orderPayResult">
        <a-tag color="blue">
          {{ orderPayResult.callback.respMsg }}
        </a-tag>
        <a-tag :color="colorMap[orderPayResult.order.order_status]" v-if="orderPayResult.order.order_status">
          订单{{ statusMap[orderPayResult.order.order_status] }}
        </a-tag>
        <a-tag color="red" v-if="orderPayResult.respMsg">
          {{ orderPayResult.respMsg }}
        </a-tag>
        <p>{{ orderPayResult }}</p>
      </div>
    </a-modal>
  </a-card>
</template>

<script>
import * as Api from '@/services/index'
import StandardTable from '@/components/table/StandardTable'
const columns = [
  {
    title: '订单编号',
    dataIndex: 'merchOrderNo'
  },
  {
    title: '汇卡编号',
    dataIndex: 'hicardOrderNo'
  },
  {
    title: '付款金额',
    dataIndex: 'amount',
    scopedSlots: { customRender: 'amount' }
  },
  {
    title: '用户ID',
    dataIndex: 'user_id'
  },
  // {
  //   title: '微信ID',
  //   dataIndex: 'oauth_id',
  //   width: 160
  // },
  {
    title: '状态码',
    dataIndex: 'respCode'
  },
  {
    title: '支付码状态',
    dataIndex: 'respMsg',
    scopedSlots: { customRender: 'respMsg' }
  },
  {
    title: '创建时间',
    dataIndex: 'createTime'
  },
  {
    title: '操作',
    scopedSlots: { customRender: 'action' }
  }
]

export default {
  name: 'OrderList',
  components: {StandardTable},
  data () {
    return {
      statusMap: {
        '1': '待付款',
        '2': '未使用',
        '3': '已使用',
        '7': '已作废',
        '8': '已过期',
        '9': '已取消'
      },
      colorMap: {
        '1': 'blue',
        '2': 'orange',
        '3': 'green',
        '8': 'purple',
        '9': 'red',
      },
      visible: false,
      advanced: true,
      columns: columns,
      dataSource: [],
      selectedRows: [],
      pagination: { 
        pageSize: 10, 
        total: 1,
        current: 1,
      },
      isSearch: false,
      searchParams: {
        merchOrderNo: '',
        date: null
      },
      modalData: '',
      orderData: {},
      orderPayResult: ''
    }
  },
  authorize: {
    deleteRecord: 'delete'
  },
  created() {
    this.getPaymentList()
  },
  methods: {
    initPage() {
      this.pagination = { 
        pageSize: 10, 
        total: 1,
        current: 1,
      }
      this.isSearch = false
    },
    getPaymentList() {
      let params = {
        page: this.pagination.current
      }
      Api.PaymentList(params).then(res => {
        this.pagination.total = res.data.total
        this.pagination.current = res.data.current_page
        this.dataSource = res.data.data
      })
    },
    // 分页
    handleTableChange(pagination) {
      const pager = { ...this.pagination };
      pager.current = pagination.current;
      this.pagination = pager;
      this.isSearch ? this.getSearchList() : this.getPaymentList()
    },
    // 搜索
    submitSearch() {
      this.initPage()
      if (Object.values(this.searchParams).every(item => !item)) {
        this.getPaymentList()
      } else {
        this.isSearch = true
        this.getSearchList()
      }
    },
    getSearchList() {
      let params = {
        ...this.searchParams,
        page: this.pagination.current
      }
      Api.PaymentSearch(params).then(res => {
        this.pagination.total = res.data.total
        this.pagination.current = res.data.current_page
        this.dataSource = res.data.data
      })
    },
    // 重置搜索参数
    reset() {
      this.searchParams = {
        merchOrderNo: '',
        date: null
      }
    },
    showModal(item) {
      this.orderPayResult = ''
      this.orderData = item.record
      this.modalData = JSON.parse(item.record.payInfo)
      if (this.modalData) {
        this.visible = true;
      }
    },
    // 查询支付结果
    queryResult() {
      let params = {
        user_id: this.orderData.user_id,
        order_id: this.orderData.merchOrderNo
      }
      Api.QueryResult(params).then(res => {
        if (res.status == 'success') {
          this.orderPayResult = res.data
        }
      })
    },
    onChangeDate(date, dateString) {
      // this.date = dateString
      // console.log(date, dateString, 'data');
      this.searchParams.date = dateString
    },
    handleMenuClick (e) {
      if (e.key === 'delete') {
        this.remove()
      }
    }
  }
}
</script>

<style lang="less" scoped>
  .search{
    // margin-bottom: 54px;
  }
  .fold{
    width: calc(100% - 216px);
    display: inline-block
  }
  .operator{
    margin-bottom: 18px;
  }
  @media screen and (max-width: 900px) {
    .fold {
      width: 100%;
    }
  }
</style>
